{% extends 'layout.html' %}
{% block main %}
    <script type=text/javascript>
        $(function() {
            p=1;
            function vi(p){
                $.get($SCRIPT_ROOT + '/seaprice?page='+p+'&'+ $("#searchform").serialize(), function(data) {
                    $("#searchcontent").html(data);
                    $("#pagebar a").click(function(e){//对分页栏中的a元素进行操作
                        e.preventDefault();//阻止a的原先事件
                        vi($(this).attr("id"));//根据获取的页码值调用显示页面函数
                    });
                    $("#page_go").click(function(e){//对分页栏中的input元素进行操作
                        e.preventDefault();
                        if (isNaN($("#page_val").val())||$.trim($("#page_val").val())==""){//判断输入的是否是数字
                            alert("输入的页码错误，请输入正确页码！");
                            $("#page_val").select();
                            return false;//页码值不是数字则退出；
                        }
                        vi($("#page_val").val());
                    });
                    $(".fee").cluetip({
                        showTitle: false,
                        activation: 'click',
                        clickThrough: false,
                        onShow: function(ct, c){
                            $("#cluetip").css({"width":"auto","max-width":"400px"});
                        }
                    });
{#                    $( document ).tooltip();#}
                    $(".remarks").cluetip({
                        showTitle: false,
                        positionBy:'bottomTop',
{#                        activation: 'click',#}
                        clickThrough: false,
                        onShow: function(ct, c){
                            $("#cluetip").css({"width":"auto"});
                        },
                        splitTitle: '|'
                    });
                    $(".lulport").cluetip({
                        showTitle: false,
                        {#                        activation: 'click',#}
                        clickThrough: true,
                        onShow: function(ct, c){
                            $("#cluetip").css({"width":"auto","max-width":"400px"});
                        },
                        splitTitle: '|'
                    });



                });
                //return false;
            }
            $('#searchbutton').bind('click', function() {
                vi(p);
            });
            vi(p);
            $('body').bind('click', function(event) {
                event = event.originalEvent;
                var tgt = event.target,
                        $tgt = $(tgt);
                if ( !$tgt.closest('div.cluetip').length ) {
                    $(document).trigger('hideCluetip');
                }
            });

        });
    </script>
    <div id="main">
        <div class="ym-wrapper">
            <div class="ym-wbox">
                <section id="searchbar" class="box info">
                    <form id="searchform">

                        <label for="loadport">起运港</label>
                        <input type="hidden" name="loadportid" value="{{ loadportid or '0' }}" />
                        <input type="search" class="ac_port" name="loadport" value="{{ loadport or '' }}" />
                        <label for="unloadport">目的港</label>
                        <input type="hidden" name="unloadportid" value="{{ unloadportid or '0' }}" />
                        <input type="search" class="ac_port" name="unloadport" value="{{ unloadport or '' }}" />
                        <label for="vaildstart">有效期</label>
                        <input class="datepicker" name="vaildstart" size="10" readonly="readonly" />
                        -
                        <input class="datepicker" name="vaildend" size="10" readonly="readonly" />
                        <button id="searchbutton" type="button" class="ym-button">询价</button>
                        <br />
                        <label for="shipcompany">承运人</label>
                        <input type="hidden" name="shipcompanyid" value="0" }}" />
                        <input type="search" class="ac_shipcompany" name="shipcompany" />

{#                        <select name="shipcompanyid">#}
{#                            <option value="0">全部</option>#}
{#                            {% for shipcompany in shipcompanys %}#}
{#                                <option value="{{ shipcompany.ShipCompanyID }}">{{ shipcompany.ShipCompanyShort }}</option>#}
{#                            {% endfor %}#}
{#                        </select>#}
                        <label for="line">航海线</label>
                        <input type="hidden" name="lineid" value="0" />
                        <input type="search" class="ac_line" name="line" />
                        <label for="cutoff">截开日</label>
                        <input type="search" name="cutoff" size="10" maxlength="1" />
                        -
                        <input type="search" name="sail" size="10" maxlength="1" />
                        <button id="resetbutton" type="reset" class="ym-button">清空</button>
                    </form>
                </section>
                <section id="searchcontent" class="ym-grid linearize-level-1"></section>
            </div>
        </div>
    </div>
{% endblock main %}